<style lang="less">
// @import "./src/less/bind";
page {
  height: 100%;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
}
@base-color: #333;
page {
  width: 100%;
  height: 100%;
}
.help {
  font-size: 0.7rem;
  color: #888;
  padding: 0 3%;
}
.input-group {
  &:hover {
    transition: all 1s;
    border: 1px solid #fefefe;
    .input-label {
      color: #fefefe;
      border-right: 1px solid #fefefe;
    }
  }
  border: 1px solid rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  padding: 25rpx 10rpx;
  margin: 40rpx 3%;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  .input-label {
    color: #fefefe;
    font-size: 13pt;
    height: 25rpx;
    line-height: 25rpx;
    padding: 0 25rpx;
    border-right: 1px solid #d8d8d8;
  }
  input {
    color: #fefefe;
    flex: 1;
    font-size: 13pt;
    min-height: 52rpx;
    height: 52rpx;
    line-height: 52rpx;
    padding: 0 25rpx;
  }
  .input-placeholder,
  picker.placeholder {
    color: #ccc;
  }
}
#bind {
  width: 100%;
  height: 100%;
  #content {
    border-radius: 10rpx;
    margin: 100rpx auto;
    padding-top: 40rpx;
    background: rgba(255, 255, 255, 0.15);
    width: 95%;
    height: 700rpx;
    #title {
      font-size: 40rpx;
      text-align: center;
      color: #fefefe;
    }
    button {
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
      border-color: @base-color;
      margin: 20rpx; // width: calc(~"100% - 40rpx");
    }
    form {
      padding-top: 20rpx;
      display: block;
      width: 100%;
    }
  }
}
</style>

<template>
  <view id="bind">
    <view id="stars"></view>
    <view id="stars2"></view>
    <view id="stars3"></view>
    <view id="content">
      <view id="title">
        绑定{{types[type].name}}
      </view>
      <form @submit="bind">
        <view class="input-group" hover-class="active">
          <text class="input-label">学号</text>
          <input name="student_id" type="number" placeholder="请输入您的学号/工号" />
        </view>
        <view class="input-group" hover-class="active">
          <text class="input-label">密码</text>
          <input name="password" type="password" placeholder="请输入您的密码" />
        </view>
        <view class="help">
          <view>{{types[type].help}}</view>
        </view>
        <button formType="submit">绑定</button>
      </form>
    </view>
  </view>
</template>

<script>
import wepy from "wepy";
import HttpMixin from "mixins/http";
import ToastMixin from "mixins/toast";
import db from "util/db";
export default class BindJwc extends wepy.page {
  config = {
    navigationBarTitleText: "",
    navigationBarBackgroundColor: "#090a0f",
    navigationBarTextStyle: "white"
  };
  mixins = [HttpMixin, ToastMixin];
  components = {};
  data = {
    type: "bind",
    types: {
      bind: {
        name: "统一认证账号",
        url: "/bind",
        verify: "verify",
        help:
          "密码为统一身份认证平台(即EDU邮箱)的密码，默认密码为身份证后六位,忘记密码可以访问 my.scu.edu.cn 找回"
      },
      library: {
        name: "图书馆",
        url: "/library/bind",
        verify: "library_verify",
        help:
          "密码为图书馆的密码，默认密码为身份证后六位,忘记密码可以访问图书馆找回"
      },
      jwc: {
        name: "教务处",
        url: "/jwc/bind",
        verify: "jwc_verify",
        help:
          "密码为教务处的密码，默认密码为身份证后六位,忘记密码可以访问教务处找回"
      }
    }
  };
  methods = {
    bind(e) {
      let params = e.detail.value;
      if (params.student_id == 0 || params.password == "") {
        this.ShowToast("学号密码必填！");
        return;
      }
      this.Bind(params);
    }
  };
  onLoad(option) {
    this.type = option.type || this.type;
  }
  async Bind(params) {
    try {
      if (db.Get(this.types[this.type].verify) == 1) {
        await this.notice();
      }
      const res = await this.POST(this.types[this.type].url || "/bind", params);
      db.Set(this.types[this.type].verify || "verify", 1);
      wepy.showModal({
        title: "绑定成功",
        content: "点击确认掉转到首页，请在首页点击查看we川大使用说明！",
        showCancel: false,
        success: function(res) {
          // 关闭所有页面并且跳转到首页，确保verify数据重新获取
          wepy.reLaunch({
            url: "/pages/index"
          });
        }
      });
    } catch (error) {
      console.log(error);
    }
  }
  notice() {
    return new Promise((resolve, reject) => {
      wepy.showModal({
        title: "提示", //提示的标题,
        content: `修改${
          this.types[this.type].name
        }绑定账号，会清空上一个账号的所有相关数据\r\n每天最多仅可更换三次绑定账号\r\n点击确认修改`, //提示的内容,
        showCancel: true, //是否显示取消按钮,
        cancelText: "取消", //取消按钮的文字，默认为取消，最多 4 个字符,
        cancelColor: "#000000", //取消按钮的文字颜色,
        confirmText: "确定", //确定按钮的文字，默认为取消，最多 4 个字符,
        confirmColor: "#3CC51F", //确定按钮的文字颜色,
        success: res => {
          if (res.confirm) {
            resolve();
            return;
          }
          reject("取消修改");
        }
      });
    });
  }
}
</script>
